import { View, Text } from "@tarojs/components";
import { styled } from "linaria/lib/react";
import React, { FC, ReactElement } from "react";
import { pageScrollTo } from "@tarojs/taro";

interface IProps {}

const ScrollToTop: FC<IProps> = (): ReactElement => {
  return (
    <ScrollToTopButton
      onClick={() => {
        pageScrollTo({
          scrollTop: 0
        });
      }}
    >
      <Text>Top</Text>
    </ScrollToTopButton>
  );
};

export default ScrollToTop;

const ScrollToTopButton = styled(View)`
  width: 3rem;
  height: 3rem;
  background-color: #fff;
  border-radius: 4px;
  position: fixed;
  right: 0;
  bottom: 120px;
  background-color: #005a53bf;
  color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
`;
